<template>
   <div class="flex flex-column " >
      <div class="home-table-area bg-white">
         <el-input 
            v-model="formData.name" 
            class="ipt"
            @clear="getList"
            clearable
            placeholder="请输入用户名搜索">
         </el-input>
         <el-button 
            type="primary" 
            @click="getList"
            class="btn">搜索
         </el-button>
         <el-button 
            type="primary" 
            @click="reset"
            class="btn">重置
         </el-button>
         <div class="table">
            <el-button type="primary" @click="$refs.add.open('appRegister').then(getList)">添加用户</el-button>
            <el-table
               :data="tableData"
               border
               max-height="550"
               stripe
               v-loading="tableLoading"
               style="width: 100%;margin-top:20px">
               <el-table-column
                  type="index"
                  width="55"
                  header-align="center"
                  align="center"
                  label="序号" >
               </el-table-column>
               <el-table-column
                  label="账号"
                  prop="account"
                  header-align="center"
                  align="center"
                  width="width">
               </el-table-column>
               <el-table-column
                  label="用户名"
                  prop="name"
                  header-align="center"
                  align="center"
                  width="width">
               </el-table-column>
               <!-- <el-table-column
                  label="角色名称"
                  prop="roleName"
                  header-align="center"
                  align="center"
                  width="width">
               </el-table-column> -->
               <el-table-column
                  label="联系方式"
                  prop="phone"
                  header-align="center"
                  align="center"
                  width="width">
               </el-table-column>
               <!-- <el-table-column
                  prop="parking_lot_name"
                  label="停车场"
                  header-align="center"
                  align="center"
                  width="width">
               </el-table-column> -->
               <el-table-column
                  prop="money"
                  label="用户余额"
                  header-align="center"
                  align="center"
                  width="width">
               </el-table-column>
               <el-table-column
                  header-align="center"
                  align="center"
                  v-slot="{row}"
                  label="操作" >
                  <div>
                     <el-button type="text" @click="$refs.add.open('editAppUser',row).then(getList)">编辑</el-button>
                     <el-button type="text" style="color:red" @click="delUser(row)">{{row.isDelete  === 1? '已拉黑' : '拉黑'}}</el-button>
                     <el-button type="text" @click="resetPwd(row)">重置密码</el-button>
                  </div>
               </el-table-column>
            </el-table>
         </div>
      </div>
      <addDialog ref="add"></addDialog>
   </div>
</template>

<script>
import addDialog from '@/components/dialog/user/add'
export default {
   name: 'index',
   components: { 
      addDialog
   },
   data () {
      return {
         formData: {
            name: ''
         },
         tableData: [],
         tableLoading: false
      }
   },
   methods: { 
      reset() { 
         this.formData = { 
            name: ''
         }
         this.getList()
      },
      async getList() { 
         try{ 
            this.tableLoading = true
            const { data : res } = await this.$api.User.getUserList({
               ...this.formData
            })
            if(res.code) return this.$message.error(res.msg)
            this.tableData = res.result
         }catch(e) { 
            console.log(e);
         }finally{ 
            this.tableLoading = false
         }
      },
      delUser(val){ 
         this.$confirm('此操作将删除该用户,是否继续?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
         }).then(async () => {
               try{ 
                  const { data : res } = await this.$api.User.closeUser({ 
                     id: val.id,
                     isDelete: val.isDelete === 0 ? 1 : 0 
                  })
                  if(res.code) return this.$message.error(res.msg)
                  this.$message.success('删除成功!')
                  this.getList()
               }catch(e) {
                  console.log(e);
               }
         }).catch(() => {
               this.$message({
               type: 'info',
               message: '已取消删除'
               });
         });
      },
      async resetPwd(val) { 
         this.$confirm('此操作将该用户密码重置为123456,是否继续?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
         }).then(async () => {
            console.log(val);
               try{ 
                  const { data : res } = await this.$api.User.resetUserPwd({ 
                     id: val.id
                  })
                  if(res.code) return this.$message.error(res.msg)
                  this.$message.success('密码重置成功!')
                  this.getList()
               }catch(e) {
                  console.log(e);
               }
         }).catch(() => {
               this.$message({
               type: 'info',
               message: '已取消重置密码'
               });
         });
      },
   },
   mounted () {
      this.getList()
   },
}
</script>

<style scoped >
   .ipt{ 
      width: 220px;
   }
   .btn{
      margin-left: 20px;
   }
   .table{
      margin-top: 20px;
   }
</style>
